<template>
	<view class="movice-item-style">
		<view class="notData_layout" v-if="list.length == 0">
			<view class="item" v-for="i in 10" style="padding: 20rpx 40rpx;">
				<view class="item-left">
					<view class="left-1"></view>
					<view class="left-2">
						<view class="left2-1"></view>
						<view class="left2-2"></view>
						<view class="left2-3"></view>
						<view class="left2-4"></view>
					</view>
				</view>
				<view class="item-right"></view>
			</view>
		</view>
		<view class="isData_layout" v-else>
			<view class="index-orderlist" v-for="(itemname, indexname) in list" :key="indexname" style="padding: 20rpx 40rpx;"
			 @click="ordermovie_tiao(itemname)">
				<image :src="itemname.img" mode=""></image>
				<view class="index_font">
					<view class="index_font_top">
						<text>{{itemname.nm | ellipsis(7)}}</text>
						<view class="index_font_hua" v-if="itemname.version && !isSearch">
							<text class="hua_left">{{itemname.version | charToArray(" ")[0]}}</text>
							<view class="hua_mid" v-if="itemname.version.indexOf(' ')!=-1
							&&itemname.version.indexOf(' ')!=0&&itemname.version.indexOf(' ')!=(itemname.version.length-1)"></view>
							<text class="hua_right" v-if="versionLength(itemname)">
								{{itemname.version | charToArray(" ")[1]}}
							</text>
						</view>
					</view>
					<view class="index-font-two" v-if="isComing" style="font-weight: Medium;color:#666666;font-size: 24rpx;align-items: flex-end;">
						<text style="font-weight: bold;color:#FF4345;font-size: 32rpx;">{{itemname.wish | trannumber}}</text>
						<text>人想看</text>
					</view>
					<view class="index-font-two" v-else>
						<!-- <text style="margin-right: 10rpx;">评分</text> -->
						<view v-if="itemname.sc > 2" class="sc-1">
							<img class="sc-star" src="/static/img/other/star-1.png" alt="" v-for="i in Math.floor(itemname.sc/2)">
						</view>
						<img class="sc-star" src="/static/img/other/star-0.png" alt="" v-if="itemname.sc%2 !=0">
						<view class="sc--1">
							<img class="sc-star" src="/static/img/other/star--1.png" alt="" v-for="i in Math.floor((10-itemname.sc)/2)">
						</view>
						<text style="font-weight: bold;margin-left:8rpx;">{{itemname.sc | toFixed(1)}}</text>分
					</view>
					
					<view class="index-font-four">
						<text class="no-warp-one">演员 {{itemname.star.replace(/,/g,' ')}}</text>
					</view>
					<view class="index-font-three">
						<text>{{itemname.cat | shufilter('|', ' ', true)}}</text>
					</view>
				</view>
				<view v-if="itemname.showst == 3" class="button bgc-tehui" @click.stop="ordermovie_tiao(itemname)">
					<text>特惠</text>
				</view>
				<view v-if="itemname.showst == 4" class="button bgc-yushou" @click.stop="ordermovie_tiao(itemname)">
					<text>预售</text>
				</view>
				<view v-if="itemname.showst == 5 && !itemname.isLike" class="button bgc-xiangkan" @click.stop="setMoviceLike(itemname, [clickIndex, indexname], 0)">
					<text>想看</text>
				</view>
				<view v-if="itemname.showst == 5 && itemname.isLike == 1" class="button bgc-yikan" @click.stop="setMoviceLike(itemname, [clickIndex, indexname], 1)">
					<text>已想</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			clickIndex: {
				type: [Number, String],
				default: 0
			},
			isComing: {
				type: Boolean,
				default: false
			},
			isSearch: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			// 即将上映跳转
			ordermovie_tiao(item) {
				switch (Number(item.showst)) {
					case 3:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 4:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 5:
						uni.navigateTo({
							url: `/subpages/wantsee/wantsee?mid=${item.mid}&s=${item.s}`
						})
						break
				}
			},
			//设置想看
			setMoviceLike(item, index, like) {
				uni.showLoading({
					title: '加载中'
				})
				item.isList = item.isList == 1 ? 0 : 1
				this.$api.setMoviceLike({
					mid: item.mid
				}).then(res => {
					this.$emit('change', like, index)
					uni.hideLoading()
				})
			},
			//判断长度
			versionLength(item) {
				let arr = this.$options.filters['charToArray'](item.version, " ")
				if(arr.length > 1){
					return true
				} else {
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movice-item-style {
		.index-orderlist {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	
		image {
			width: 140rpx;
			height: 185rpx;
			border-radius: 10rpx;
		}
	
		.index_font {
			margin-left: 25rpx;
			flex: 1;
			color: #6d6d6d;
			font-size: 26rpx;
	
			.index_font_top {
				display: flex;
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
				align-items: center;
	
				.index_font_hua {
					display: flex;
					align-items: center;
					font-size: 10px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4345;
					border: 2rpx solid rgba(255,67,69,0.3);
					border-radius: 10rpx;
					margin-left: 10rpx;
					overflow: hidden;
	
					.hua_left {
						display: inline-block;
						padding: 0rpx 8rpx;
						box-sizing: border-box;
						height: 100%;
					}
					.hua_mid {
						width: 2rpx;
						height: 20rpx;
						background-color: rgba(255, 67, 69, 0.30);
					}
					.hua_right {
						padding: 0 8rpx;
					}
				}
			}
	
			.index-font-two {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #FF4345;
				
				.sc-star {
					height: 24rpx;
					width: 24rpx;
				}
				.sc--1 {
					display: flex;
				}
				.sc-1 {
					display: flex;
				}
			}
	
			.index-font-three {
				margin-top: 12rpx;
			}
	
			.index-font-four {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
	
			.no-warp-one {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
		.button {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 46rpx;
			width: 104rpx;
			border-radius: 23rpx;
			
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		// 不同类型按钮的背景颜色
		.bgc-tehui {
			background: linear-gradient(90deg, #F87474, #FF4345);
		}
		.bgc-yushou {
			background: linear-gradient(90deg, #74B5F8, #428FF7);
		}
		.bgc-xiangkan {
			background: linear-gradient(90deg, #7BD0A7, #40B97F);
		}
		.bgc-yikan {
			border: 1px solid rgba(221,221,221,0.8);
			color: #999999;
		}
	}
	.notData_layout {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-left {
				display: flex;
				.left-1 {
					width: 140rpx;
					height: 186rpx;
					background: #F6F6F6;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
				.left-2 {
					width: 296rpx;
					height: 186rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-between;
					.left2-1 {
						width: 270rpx;
						height: 40rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
					.left2-2 {
						width: 168rpx;
						height: 28rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
					.left2-3,.left2-4 {
						width: 296rpx;
						height: 28rpx;
						background: #F6F6F6;
						border-radius: 4rpx;
					}
				}
			}
			.item-right {
				width: 104rpx;
				height: 40rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
			}
		}
	}
</style>
